<template>
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="(page,index) of pages" :key="index">
                <div class="homeicons" >
                    <div class="icon" v-for="(item) of page" :key="item.id">
                        <img :src="item.imgUrl" alt="">
                        <p>{{item.title}}</p>
                    </div>
                </div>
            </swiper-slide>

            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-scrollbar" slot="scrollbar"></div>
        </swiper>
    
</template>
<script>
export default {
  name: "HomeIcons",
  props: {
    icons: {
      type: Array
    }
  },
  computed: {
    pages() {
      const pages = [];
      for (let i = 0; i < this.icons.length / 8; i++) {
        pages[i] = this.icons.slice(8 * i, 8 * (i + 1));
      }
      return pages;
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        }
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.homeicons {
  font-size: 16px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 50vw;
  grid-template-rows: 25vw 25vw;
  align-items: center;
  img {
    width: 110px;
    height: 110px;
  }
}
</style>
